<template>
  <b-col>
    <!-- 导航栏 -->
    <b-row>
      <NavigationBar :type="0" />
    </b-row>
    <b-row>
      <b-container class="bg-white">
        <!-- 第一行搜索框  -->
        <b-row class="justify-content-center mt-5">
          <b-col class="col-8">
            <b-form-input type="search" class="rounded-pill" size="md" v-model="text" :value="text" />
          </b-col>
          <b-col class="col-auto pl-0">
            <b-link @click="search" class="searchIcon iconfont icon-search text-decoration-none" style="font-size:23px" />
          </b-col>
        </b-row>
        <!-- 第二行功能栏 -->
        <b-row class="border-top mt-4 text-center">
          <b-col class="py-2">
            <b-link @click="display = 1" class="text-decoration-none text-dark px-5 py-2" :class="{onFocus:display == 1}" style="font-size:18px">
              文章
            </b-link>
          </b-col>
          <b-col class="py-2">
            <b-link @click="display = 2" class="text-decoration-none text-dark px-5 py-2" :class="{onFocus:display == 2}" style="font-size:18px">
              动态
            </b-link>
          </b-col>
          <b-col class="py-2">
            <b-link @click="display = 3" class="text-decoration-none text-dark px-5 py-2" :class="{onFocus:display == 3}" style="font-size:18px">
              番剧
            </b-link>
          </b-col>
          <b-col class="py-2">
            <b-link @click="display = 4" class="text-decoration-none text-dark px-5 py-2" :class="{onFocus:display == 4}" style="font-size:18px">
              用户
            </b-link>
          </b-col>
        </b-row>
        <!--  内容行 -->
        <b-row v-if="cardShow" class="mt-2">
          <!-- 文章 -->
          <ArticleSearch ref="entity1" :text="this.$route.query.text" v-show="display == 1" />
          <!-- 动态 -->
          <DynamicSearch ref="entity2" :text="this.$route.query.text" v-show="display == 2" />
          <!-- 番剧 -->
          <BangumiSearch ref="entity3" :text="this.$route.query.text" v-show="display == 3" />
          <!-- 用户 -->
          <UserSearch ref="entity4" :text="this.$route.query.text" v-show="display == 4" />
        </b-row>

      </b-container>
    </b-row>
  </b-col>
</template>
<script>
import ArticleSearch from './result/ArticleSearch';
import DynamicSearch from './result/DynamicSearch';
import BangumiSearch from './result/BangumiSearch';
import UserSearch from './result/UserSearch';
import NavigationBar from '../NavigationBar';
export default {
  components: {
    NavigationBar,
    ArticleSearch,
    DynamicSearch,
    BangumiSearch,
    UserSearch
  },
  data() {
    return {
      //控制功能区块的显示
      display: 1,
      //搜索栏内容
      text: '',
      //组件刷新
      cardShow: true,
    }
  },
  mounted() {
    if (this.$route.query.text == '') {
      this.cardShow = false;
    }
    this.text = this.$route.query.text
    document.title = "WaaFun-搜索:" + this.text;
  },
  computed: {

  },
  beforeRouteUpdate(to) {
    switch (this.display) {
      case 1: this.$refs.entity1.search(this.text, to.query.page); break;
      case 2: this.$refs.entity2.search(this.text, to.query.page); break;
      case 3: this.$refs.entity3.search(this.text, to.query.page); break;
      case 4: this.$refs.entity4.search(this.text, to.query.page); break;
    }
    this.$route.query.text = this.text;
    this.$route.query.page = to.query.page;
  },
  methods: {
    //切换结果内容
    changeContent(num) {
      this.display = num;
      switch (num) {
        case 1: console.log("切换到文章结果"); this.$route.query.page = 1; break;
        case 2: console.log("切换到动态结果"); this.$route.query.page = 1; break;
        case 3: console.log("切换到番剧结果"); this.$route.query.page = 1; break;
        case 4: console.log("切换到文用户结果"); this.$route.query.page = 1; break;
      }
    },
    //搜索
    search() {
      // console.log(this.text);
      this.$router.replace({
        path: "/SearchResult",
        query: {
          text: this.text,
          page: 1
        }
      }).catch(err => err)
      this.$route.query.text = this.text;
      document.title = "WaaFun-搜索:" + this.text;
      this.refresh();
    },
    //刷新组件
    refresh() {
      this.cardShow = false;
      this.$nextTick(() => {
        this.cardShow = true;
      })
    },
  },
}
</script>
<style scoped>
.form-control:focus .btn:focus {
  outline: none;
  box-shadow: none;
}
.searchIcon {
  color: #000000;
}
.searchIcon:hover {
  color: orange;
}
.onFocus {
  border-bottom: 3px solid #0c91de;
}
</style>
